<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { timeFormat } from '@/utils/publicMethods'
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getSecondLevelPortraitApi, getProfileInfoApi, getGridExcelApi } from '@/api/huaxiang'
import { ElMessage } from 'element-plus'
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  fromInfo: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
}>()

const fromData = ref({
  realName: props.fromInfo.realName,
  loginName: props.fromInfo.loginName,
  areaName: props.fromInfo.areaName,
  sId: '',
  page: 1,
  rows: 10
})
const monthInfo = ref<any>(timeFormat(new Date()).firstDayOfMonth)

const indexList = ref<any>([])
const getIndexList = async () => {
  const params = {
    sqlId: 'engineerProfile.getSecondLevelPortrait',
    sqlParam: JSON.stringify({
      fId: props.fromInfo.fId
    }),
    pagination: false,
    dbName: 'doris',
    debug: 0
  }
  await getSecondLevelPortraitApi(params).then((res: any) => {
    // console.log(res.rows)
    indexList.value = res.rows
    // console.log(res.rows)
    fromData.value.sId = res.rows[0].sId
    getTabList()
  })
}

const monthChange = (val: any) => {
  // console.log(val)
  monthInfo.value = val
  // getScoreEchart()
}

const searchBtn = () => {
  getTabList()
}

const Cancel = () => {
  emit('update:isShow', false)
}

const loading = ref(true)
const tableList = ref<any>([])
const total = ref(0)
const getTabList = async () => {
  loading.value = true
  const params = {
    sqlId: 'engineerProfile.getProfileInfo',
    sqlParam: JSON.stringify({
      sId: fromData.value.sId,
      completeTime: timeFormat(monthInfo.value).YYYYMM,
      receiptUserId: fromData.value.loginName
    }),
    pagination: true,
    dbName: 'doris',
    debug: 0,
    page: fromData.value.page,
    rows: fromData.value.rows
  }
  await getProfileInfoApi(params).then((res: any) => {
    loading.value = false
    tableList.value = res.rows
    total.value = res.total
    // console.log(res)
  })
}

const handleSizeChange = (val: number) => {
  fromData.value.page = 1
  fromData.value.rows = val
  getTabList()
}

const handleCurrentChange = (val: number) => {
  fromData.value.page = val
  getTabList()
}

const fileIdInfo = ref<any>()
const getExportInfo = async () => {
  const params = {
    fileType: 'xlsx',
    containHidden: 'false',
    remote: 'false',
    showLoading: 'true',
    fileName: props.fromInfo.title + '详情',
    sqlId: 'engineerProfile.getProfileInfo',
    title:
      '工单编号,1,1,false;是否达标,1,1,false;业务号码,1,1,false;创建时间,1,1,false;接单时间,1,1,false;是否超时,1,1,false;归档时间,1,1,false;!',
    columns: JSON.stringify([
      'orderCode',
      'flag',
      'accNbr',
      'createTime',
      'acceptTime',
      'isTimeOut',
      'completeTime'
    ]),
    sqlParam: JSON.stringify({
      completeTime: timeFormat(monthInfo.value).YYYYMM,
      receiptUserId: fromData.value.loginName,
      sId: fromData.value.sId
    }),
    dbName: 'doris'
  }
  await getGridExcelApi(params)
    .then(async (res: any) => {
      // console.log(res)
      if (res) {
        const str = String(res).split('.').join('')
        fileIdInfo.value = str.slice(0, 1) + '.' + str.slice(1) + 'E8'
        // console.log(fileIdInfo.value)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href =
          import.meta.env.VITE_APP_URL +
          '/common/getGridExcel?fileId=' +
          fileIdInfo.value +
          '&fileName=' +
          encodeURI(props.fromInfo.title) +
          '&fileType=xlsx&remote=false'
        // link.setAttribute('download', props.fromInfo.title + '详情.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // getExportInfos(res)
      }
    })
    .finally(() => {
      exportLoading.value = false
    })
}
const exportLoading = ref<any>(false)
const exportBtn = () => {
  if (total.value === 0) {
    ElMessage({
      message: '暂无数据导出',
      type: 'warning'
    })
  } else {
    exportLoading.value = true
    getExportInfo()
  }
  // console.log('导出')
}

onMounted(() => {
  getIndexList()
})
</script>
<template>
  <el-dialog :model-value="true" :title="fromInfo.title + '详情'" width="80%" @close="Cancel">
    <el-form :inline="true" :model="fromData" style="margin-top: 15px">
      <el-form-item label="姓名：">
        <el-input disabled v-model="fromData.realName" />
      </el-form-item>
      <el-form-item label="工号：">
        <el-input disabled v-model="fromData.loginName" />
      </el-form-item>
      <el-form-item label="本地网：">
        <el-input disabled v-model="fromData.areaName" />
      </el-form-item>
      <el-form-item label="指标名称：">
        <el-select v-model="fromData.sId" placeholder="请输入组织关系树" style="width: 180px">
          <el-option
            v-for="item in indexList"
            :key="item.sId"
            :label="item.sName"
            :value="item.sId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="月份：">
        <el-date-picker
          v-model="monthInfo"
          :clearable="false"
          type="month"
          placeholder="请选择月份"
          style="width: 180px"
          @change="monthChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="searchBtn">查询</el-button>
        <el-button type="primary" :loading="exportLoading" @click="exportBtn">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      class="TableBox"
      v-loading="loading"
      :data="tableList"
      border
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column prop="orderCode" label="工单编号" />
      <el-table-column prop="flag" label="是否达标" />
      <el-table-column prop="accNbr" label="业务号码" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="acceptTime" label="接单时间" />
      <el-table-column prop="isTimeOut" label="是否超时" />
      <el-table-column prop="completeTime" label="归档时间" />
    </el-table>
    <el-pagination
      v-model:current-page="fromData.page"
      v-model:page-size="fromData.rows"
      :page-sizes="[10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </el-dialog>
</template>
<style scoped></style>
